<template>
  <div class="entrance">
    <div class="leftbox">
      <div class="leftboxfirst">
        <div class="left borderback">
          <moduletitle title="项目统计" />
          <div class="profor">
            <div class="forbox">
              <span class="proname"> 项目总数(个)</span>
              <span class="procount">{{ projecttotlecount }}</span>
            </div>
            <div style="position: relative; width: 24%; margin-left: 2vh">
              <div ref="progress" style="width: 100%; height: 100%"></div>
              <span class="forboxchildspan">在建项目(个)</span>
            </div>
            <div style="position: relative; width: 24%">
              <div ref="shutDown" style="width: 100%; height: 100%"></div>
              <span class="forboxchildspan">停工项目(个)</span>
            </div>
            <div style="position: relative; width: 24%">
              <div ref="complete" style="width: 100%; height: 100%"></div>
              <span class="forboxchildspan">完工项目(个)</span>
            </div>
          </div>
        </div>
        <div class="right borderback">
          <moduletitle title="人员统计" />
          <div class="presonPerclass">
            <div v-for="(i, o) in Personnel" :key="o" class="presonclass">
              <div class="leftperson">
                <img :src="i.img" alt="" />
              </div>
              <div class="rightperson">
                <span class="overhi">{{ i.name }}</span>
                <span>{{ i.value }}<b class="unit">人</b></span>
              </div>
            </div>
          </div>
        </div>
      </div>
      <div class="leftboxmiddle">
        <div class="left borderback">
          <moduletitle title="考勤情况" />
          <div class="information">
            <div
              v-for="(i, o) in dataobj.information"
              :key="o"
              class="informationchiuld"
            >
              <span class="overhi">{{ i.name }}</span>
              <span
                >{{ i.value
                }}<b class="unit">{{ o == 1 ? "%" : "人" }}</b></span
              >
            </div>
          </div>
          <div ref="reliability" style="width: 100%; height: 70%"></div>
        </div>
        <div class="right borderback">
          <moduletitle title="项目考勤率排名" />
          <div ref="map" style="width: 100%; height: 100%"></div>
        </div>
      </div>
      <div class="leftboxlast borderback">
        <moduletitle title="项目及劳务人员地域分布" />
        <!-- <div ref="distribution" style="width: 100%; height: 100%"></div> -->
        <el-table
          :data="dataobj.tableData || []"
          height="182"
          style="width: 100%; height: 100%"
        >
          <el-table-column type="index" width="55" label="排名">
          </el-table-column>
          <el-table-column
            prop="project_name"
            label="项目"
            :show-overflow-tooltip="true"
          >
          </el-table-column>
          <el-table-column
            prop="30day_count"
            label="考勤人数（人）"
            :show-overflow-tooltip="true"
          >
          </el-table-column>
          <el-table-column
            prop="inner"
            label="总人数（人）"
            :show-overflow-tooltip="true"
          >
          </el-table-column>
          <el-table-column
            prop="paidmy"
            label="考勤率"
            :show-overflow-tooltip="true"
          >
          </el-table-column>
        </el-table>
      </div>
    </div>
    <div class="rightbox">
      <div class="firstbox borderback">
        <moduletitle title="进出场统计" />
        <div ref="exitStatistics" style="width: 100%; height: 100%"></div>
      </div>
      <div class="seconbox borderback">
        <moduletitle title="人员性别统计" />
        <div ref="femaleUsers" style="width: 100%; height: 100%"></div>
      </div>
      <div class="threebox borderback">
        <moduletitle title="人员年龄分布" />
        <div ref="personage" style="width: 100%; height: 100%"></div>
      </div>
      <div class="lastbox borderback">
        <moduletitle title="人员工种分布" />
        <div ref="personcraft" style="width: 100%; height: 100%"></div>
      </div>
    </div>
  </div>
</template>
<script>
import moduletitle from "./moduletitle.vue";
import screenAdapter from "./screenAdapter.vue";
import myminxin from '@/views/monitoring/minxin'
import "./map/china.js";
export default {
  components: { moduletitle, screenAdapter },
  mixins:[myminxin],
  data() {
    return {
      projecttotlecount: "0",
      personcount: null,
      isload: null,
      Personnel: [
        {
          name: "项目总人数",
          value: 0,
          img: require("./images/team-full.png"),
        },
        {
          name: "管理人员",
          value: 0,
          img: require("./images/guanliyuan.png"),
        },
        {
          name: "建筑工人",
          value: 0,
          img: require("./images/gongren.png"),
        },
        {
          name: "黑名单人员",
          value: 0,
          img: require("./images/heimingdan.png"),
        },
      ],
      information: [
        {
          name: "当日出勤人数",
          value: "50人",
        },
        {
          name: "当日出勤率",
          value: "40%",
        },
        {
          name: "30日内未考勤人数",
          value: "30人",
        },
      ],
    };
  },
  props: {
    sceenloading: {
      type: Boolean,
    },
    dataobj: {
      type: Object,
    },
  },
  watch: {
    sceenloading: function () {
      if (this.sceenloading) {
        this.isload.close();
        this.$nextTick(() => {
          this.render();
        });
      }
    },
  },
  mounted() {
    console.log("render");
    let that = this;
    if (!that.sceenloading) {
      this.isload = this.$loading({
        lock: true,
        text: "加载中",
        spinner: "el-icon-loading",
        background: "rgb(1, 7, 42,.5)",
      });
    }
    this.render();
    window.addEventListener("resize", function () {
      that.render();
    });
  },
  methods: {
    render() {
      let manager = this.dataobj.manager;
      Object.keys(manager).map((key) => {
        this.Personnel.map((item) => {
          if (item.name == key) {
            item.value = manager[key];
          }
        });
      });
      this.projecttotlecount = this.dataobj.all;
      this.personcount = this.dataobj.manager["项目总人数"];
      this.getprogress([this.dataobj["finish"], "progress", "#0378FC"]);
      this.getprogress([this.dataobj["stop"], "shutDown", "#FE4F46"]);
      this.getprogress([this.dataobj["building"], "complete", "#04E4FF"]);
      this.getexitStatistics(); //接口没掉
      this.renderreliability(); //接口没掉
      // this.getprojectandname();
      this.getfemaleUsers(this.dataobj.sex["女"], this.dataobj.sex["男"]);
      this.getpersonage(this.dataobj.age, "personage");
      this.getpersonage(this.dataobj.workTimes, "personcraft");
      this.getmap();
    },
  },
};
</script>
<style lang="scss" >
.entrance {
  .el-tooltip__popper {
  font-size: 23.5px;
  text-align: center;
  transform: scale(0.5);
  margin: 4px 11px;
  width: 204px;
  line-height: 28px;
  transform-origin: left;
}
  position: absolute;
  top: 14%;
  overflow: hidden;
  .unit {
    font-size: 12px;
  }
  .el-table thead {
    color: #fff !important;
  }
  .el-table--mini,
  .el-table--small,
  .el-table__expand-icon {
    font-size: 1.3rem;
  }
  .el-table {
    background-color: transparent;
    color: white;
    padding: 0 14px 0px 14px;
    margin-top: 42px;
  }
  .el-table--border::after,
  .el-table--group::after,
  .el-table::before {
    display: none !important;
  }
  .el-table th,
  .el-table tr {
    // 如果要增加竖线上方加上.el-table td
    border: 0;
    background-color: transparent;
    height: 51px;
  }
  // 鼠标滑过td上作用的样式，ie6不支持:hover伪类属性，如果是ie6要写成tr.over样式
  .el-table tbody tr:hover > td {
    background-color: transparent !important;
  }
  // 如果td没有颜色，可以去掉，这里加上保险
  .el-table__body tr.hover-row > td {
    background-color: transparent;
  }
  .el-table td,
  .el-table th.is-leaf {
    border: none !important;
  }
  thead {
    th {
      background: rgb(15, 33, 85) !important;
      text-align: center;
      font-weight: 500 !important;
      // font-size: 1rem;
      font-size: 15.5px;
    }
  }
  .el-table__body-wrapper {
    .cell {
      text-align: center !important;
    }
    tr:nth-child(odd) {
      // background: rgba(23, 52, 109, 0.5) !important;
      background: rgb(22, 49, 104) !important;
      text-align: center;
      font-weight: 500 !important;
      // font-size: 1rem;
      font-size: 15.5px;
    }
  }
  .el-table__empty-block {
    width: 100% !important;
  }
  .el-table__body-wrapper {
    tr:nth-child(even) {
      // background: rgba(14, 30, 81, 0.5) !important;
      background: rgb(15, 33, 85) !important;
      text-align: center;
      font-weight: 500 !important;
      // font-size: 1rem;
      font-size: 15.5px;
    }
  }
  width: 100%;
  height: 100%;
  color: white;
  display: flex;
  justify-content: center;
  .borderback {
    background: rgb(10, 18, 66, 0.9);
    border: 1px solid #1993fa;
    border-radius: 8px;
  }
  .overhi {
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
  }
  .forboxchildspan {
    position: absolute;
    bottom: 2.5vh;
    text-align: center;
    width: 100%;
    // font-size: 1rem;
    font-size: 14px;
  }
  .leftbox {
    height: 100%;
    width: 65%;
    overflow: hidden;
    z-index: 1;
    .leftboxfirst {
      display: flex;
      .left {
        width: 612px;
        height: 165px;
        position: relative;
        .profor {
          display: flex;
          width: 100%;
          height: 100%;
          position: absolute;
          top: 10px;
          .forbox:nth-child(1) {
            text-align: center;
            text-align: center;
            padding-top: 9%;
          }
          .forbox {
            width: 15vh;
            height: 100%;
            flex: 1;
            .proname {
              display: inline-block;
              // font-size: 1rem;
              font-size: 14px;
            }
            .procount {
              // font-size: 2rem;
              font-size: 36px;
              margin-top: 1vh;
              font-family: PingFang SC;
              font-weight: 600;
              color: #19a7f9;
              line-height: 36px;
              width: 100%;
              display: inline-block;
            }
          }
        }
      }
      .right {
        width: 612px;
        margin-left: 17px;
        height: 165px;
        .presonPerclass {
          display: flex;
          width: 100%;
          height: 100%;
          padding-left: 1vh;
          .presonclass:nth-child(1) {
            img {
              width: 23px !important;
              height: 16px !important;
            }
          }
          .presonclass {
            height: 100%;
            width: 25%;
            padding-top: 10px;
            overflow: hidden;
            display: flex;
            justify-content: center;
            align-items: center;
            margin-right: 1vh;
            .leftperson {
              width: 43px;
              height: 43px;
              border: 2px solid #19a7f9;
              border-radius: 50%;
              display: flex;
              justify-content: center;
              align-items: center;
              position: relative;
              top: -7px;
              img {
                width: 16px;
                height: 16px;
              }
            }
            &:nth-child(4) {
              .rightperson {
                border-right: 0px solid #19a7f9 !important;
              }
            }
            .rightperson {
              border-right: 1px solid #19a7f9;
              margin-left: 1vh;
              padding-right: 2vh;
              text-align: center;
              span {
                display: inline-block;
              }
              span:nth-child(2) {
                // margin-top: 1vh;
                // color: #1993fa;
                // // font-size: 1.6rem;
                // font-size: 30px;
                // font-weight: 600;
                margin-top: 1vh;
                color: #19a7f9;
                font-size: 24px;
                // font-weight: 600;
              }
              span:nth-child(1) {
                color: #fff;
                display: block;
                // font-size: 1rem;
                font-size: 14px;
              }
            }
          }
        }
      }
    }
    .leftboxmiddle {
      margin-top: 17px;
      width: 100%;
      // height: 38vh;
      display: flex;
      .left {
        width: 612px;
        height: 452px;
        position: relative;
        .information {
          display: flex;
          padding: 0 23px;
          justify-content: space-between;
          margin-top: 8%;
          .informationchiuld {
            width: 33%;
            padding-top: 1vh;
            background: rgba(13, 27, 81, 0.9);
            margin-right: 2vh;
            padding: 2%;
            text-align: center;
            span {
              display: inline-block;
              width: 100%;
              color: #04e4ff;
              font-size: 1.6rem;
              margin-top: 3%;
            }
            span:nth-child(1) {
              color: #fff;
              // font-size: 1rem;
              font-size: 14px;
            }
            span:nth-child(2) {
              font-size: 30px;
              display: flex;
              align-items: baseline;
              justify-content: center;
            }
          }
        }
      }
      .right {
        width: 612px;
        height: 452px;
        margin-left: 17px;
      }
    }
    .leftboxlast {
      margin-top: 17px;

      width: 1241px;
      height: 236px;
      display: flex;
      .title {
        position: absolute !important;
      }
      .left {
        width: 50%;
        height: 100%;
      }
      .right {
        width: 50%;
        margin-left: 17px;
        height: 100%;
      }
    }
  }
  .rightbox {
    margin-left: 10px;
    height: 100%;
    overflow: hidden;
    width: 30%;
    z-index: 1;
    .firstbox {
      width: 511px;
      height: 165px;
    }
    .seconbox {
      width: 511px;
      height: 202px;
      margin-top: 17px;
    }
    .threebox {
      width: 511px;
      height: 236px;
      margin-top: 13px;
    }
    .lastbox {
      width: 511px;
      height: 236px;
      margin-top: 17px;
    }
  }
}
</style>

